<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video id="webcam"></video>

    <button id="btn">点击捕获</button>
  </body>

  <script>
    navigator.getUserMedia =
      navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;

    function onSuccess(stream) {
      let video = document.getElementById("webcam");
      //   video.src = window.URL.createObjectURL(stream);

      console.log("video", video);

      //   if (window.URL) {
      //     video.src = window.URL.createObjectURL(stream);
      //   } else {
      //     video.src = stream;
      //   }

      console.log("stream", stream);
      video.srcObject = stream;

      video.autoplay = true;
    }

    function onError(error) {
      console.log("navigator.getUserMedia error: ", error);
    }

    btn.onclick = () => {
      let constraints = { video: true };
      navigator.getUserMedia(constraints, onSuccess, onError);
    };
  </script>

  <style>
    video {
      width: 400px;
      height: 300px;
    }
  </style>
</html>
